<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div class="card content-box">
    <span class="text">员工管理</span>
    <!--选择机构，部门，添加员工-->
    <el-select v-model="insId" placeholder="选择机构" size="large" style="width: 240px">
      <el-option
        v-for="item in institutionList"
        :key="item.institutionName"
        :label="item.institutionName"
        :value="item.institutionName"
      />
    </el-select>
    <el-select v-model="depId" placeholder="Select" size="large" style="width: 240px">
      <el-option v-for="item in depList" :key="item.departmentName" :label="item.departmentName" :value="item.departmentName" />
    </el-select>
    <el-button type="success" @click="addClick" style="margin-left: -90%">添加员工</el-button>
    <!--展示机构列表-->
    <el-table :data="employees" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column label="工号" prop="workerId"></el-table-column>
      <el-table-column label="机构编号" prop="institutionId"></el-table-column>
      <el-table-column label="部门编号" prop="departmentId"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button type="primary" @click="show(row)" :icon="Search" circle></el-button>
          <el-button type="danger" @click="del(row)" :icon="Delete" circle />
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="空空如也" />
      </template>
    </el-table>
  </div>

  <!-- 添加员工弹窗 -->
  <el-dialog v-model="show_add" width="40%">
    <el-form :model="employee" label-width="130px" style="padding-right: 30px">
      <el-form-item label="机构名称">
        {{ insId }}
      </el-form-item>
      <el-form-item label="部门编号">
        {{ depId }}
      </el-form-item>
      <el-form-item>
        <el-select v-model="tempRank" placeholder="确定级别" size="large" style="width: 240px">
          <el-option v-for="item in rankList" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show_add = false">取消</el-button>
        <el-button type="primary" @click="add"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改弹窗 -->
  <el-dialog v-model="show_detail" width="40%">
    <el-form :model="employee" label-width="130px" style="padding-right: 30px">
      <el-form-item label="机构名称">
        {{ insId }}
      </el-form-item>
      <el-form-item label="部门编号">
        {{ depId }}
      </el-form-item>
      <el-form-item>
        <el-select v-model="tempRank" placeholder="确定级别" size="large" style="width: 240px">
          <el-option v-for="item in rankList" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show_detail = false">取消</el-button>
        <el-button type="primary" @click="edit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!--展示机构详情抽屉-->
</template>

<script setup lang="ts" name="departmentManage">
import { onMounted, ref, watch } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { getAllInstitutionService, getDepService } from "@/api/backoffice/institution";
import { getAllEmployeeService, addEmployeeService, delEmployeeService, editEmployeeService } from "@/api/backoffice/employee";

//基础数据

//
const rankList = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];

//机构列表
//const insList = ref([]);
const depList = ref([
  {
    departmentName: "",
    description: "",
    institutionId: "",
    departmentId: ""
  }
]);
const institutionList = ref([
  {
    institutionName: "string",
    description: "string",
    institutionId: 0
  }
]);
const depId = ref();
const insId = ref();

//控制变量
const show_add = ref(false);
const show_detail = ref(false);

//基础数据获取
const getInsList = async () => {
  let result = await getAllInstitutionService();
  institutionList.value = result.data;
};
const getDep = async () => {
  let result = await getDepService(insId.value);
  depList.value = result.data;
};

// 定义一个函数，当depId的值改变时将被调用
const handleDepIdChange = (newValue, oldValue) => {
  console.log(`depId changed from ${oldValue} to ${newValue}`);
  // 在这里执行你需要的操作
  getDep();
};

// 设置一个侦听器，当depId的值改变时调用handleDepIdChange函数
watch(insId, handleDepIdChange);

//页面加载自动调用
getInsList();
onMounted(getInsList);

//员工数据模型
const employees = ref([
  {
    institutionId: "",
    departmentId: "",
    rank: "",
    workId: ""
  }
]);

const employee = ref({
  institutionId: "",
  departmentId: "",
  rank: "",
  workerId: ""
});

const clearEmployee = () => {
  employee.value = {
    institutionId: "",
    departmentId: "",
    rank: "",
    workerId: ""
  };
};

const addClick = () => {
  show_add.value = true;
  clearEmployee();
};

//完成选择
const getAllEmployee = async () => {
  let DataObj = {
    institutionId: insId.value,
    departmentId: depId.value
  };
  let result = await getAllEmployeeService(DataObj);
  employees.value = result.data;
};

//可能存在问题
const handleDepIdChange2 = (newValue, oldValue) => {
  console.log(`depId changed from ${oldValue} to ${newValue}`);
  // 在这里执行你需要的操作
  getAllEmployee();
};

//监听部门改变则员工表改变
watch(depId, handleDepIdChange2);

//某一员工详情
const getEmployee = row => {
  employee.value.institutionId = row.institutionId;
  employee.value.departmentId = row.departmentId;
  employee.value.workerId = row.workerId;
  employee.value.rank = row.rank;
};

const tempRank = ref("");

//修改员工职位
const show = row => {
  getEmployee(row);
  show_detail.value = true;
};

const edit = async () => {
  employee.value.rank = tempRank.value;
  await editEmployeeService(employee.value);
};

//添加员工
const add = async () => {
  let DataObj = {
    institutionId: insId.value,
    departmentId: depId.value,
    rank: tempRank.value
  };
  await addEmployeeService(DataObj);
  ElMessage.success("操作成功");
  show_add.value = false;
};

//删除员工
const del = async id => {
  let DataObj = {
    institutionId: insId.value,
    departmentId: depId.value,
    workerId: id
  };
  await delEmployeeService(DataObj);
  ElMessage.success("操作成功");
};

//编辑
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.demo-tabs {
  margin-top: -20px;
}
.topadd {
  position: absolute;
  top: 73px;
  right: 40px;
}
.page-container {
  box-sizing: border-box;
  min-height: 100%;
}
.add {
  position: absolute;
  top: 80%;
  right: 3%;
  float: left;
  width: 60px;
  height: 60px;
  font-size: 50px;
  font-weight: 600;
  border-radius: 50%;
}
.inneradd {
  position: absolute;
  top: 55px;
  right: 30px;
  float: left;
  font-weight: 900;
}
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #060707;
  text-align: center;
}
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}
.Product-image {
  width: auto; /* 图片宽度自适应 */
  max-width: 100%; /* 图片最大宽度为其容器的100% */
  height: auto; /* 图片高度自适应 */
  max-height: 100%; /* 图片最大高度为其容器的100% */
}
</style>
